<template>
	<view class="home-content">
		<view class="home-head">
			<view class="home-head-bg">
				<view class="head-top">
					<view class="head-scname">
						<view class="scname-icon">
							<image src="../../static/Hicon/scname_icon.png" mode=""></image>
						</view>
						<!-- @click="openDepart" -->
						<view class="deptName">
							{{realname}}
							{{deptName}}
						
						</view>
					</view>
					<!-- <view class="head-scoption">
						<view class="help_icon">
							
						</view>
						<view class="scan_icon">
							<image src="../../static/Hicon/scan_icon.png"></image>
						</view>
					</view> -->
				</view>
				<view class="head-person">
				<!-- 	<view class="person_logo">
						<image src="../../static/Hicon/user_logo.png" mode=""></image>
					</view>
					<view class="person_name">
						{{realname}}
					</view> -->
				</view>
				<view class="head-infor-list">
					<view class="list-box">
						<view class="box-number">
							{{dshCount}}
						</view>
						<view class="box-name">
							待审批
						</view>
					</view>
					<!-- <view class="list-box" @click="openlist(0,'PROCESS')">
						<view class="box-number">
						{{dclCount}}
						</view>
						<view class="box-name">
							待处理
						</view>
					</view> -->
					<view class="list-box">
						<view class="box-number">
							{{yshCount}}
						</view>
						<view class="box-name">
							已审批
						</view>
					</view>
					<!-- 	<view class="list-box" @click="openlist(1,'PROCESS')">
						<view class="box-number">
							{{yclCount}}
						</view>
						<view class="box-name">
							已处理
						</view>
					</view> -->
				</view>
			</view>
			<!-- <view class="purchase-content">
				<content-nav :data='purchase'></content-nav>
			</view> -->

		</view>
		<!-- <view class="permanent-content">
			<content-nav :data='permanent'></content-nav>
		</view> -->
		<view class="announcement-content">

			<view class="announcement-bar">

				<view class="an-bar" @click="barChange" data-bar='zhaobaomodule'
					:class="[currentBar=='zhaobaomodule'?'an-bar-active':'']">
					待审批
				</view>

				<view class="an-bar" @click="barChange" data-bar='zhongbaomodule'
					:class="[currentBar=='zhongbaomodule'?'an-bar-active':'']">
					已审批
				</view>
				<!-- <view class="an-bar"  @click="barChange" data-bar='xianbaomodule' :class="[currentBar=='xianbaomodule'?'an-bar-active':'']">
					闲置公告
				</view> -->
			</view>

			<view class="announcement-module">
				<zhao-bao v-if="currentBar=='zhaobaomodule'" :isApproved="0"></zhao-bao>
				<zhao-bao v-if="currentBar=='zhongbaomodule'" :isApproved="1"></zhao-bao>
				<!-- <zhao-bao v-if="currentBar=='xianbaomodule'"></zhao-bao> -->
			</view>
		</view>
		<radio-modal ref='radioModal'></radio-modal>
	</view>
</template>

<script>
	import contentNav from '../component/content-nav.vue'
	import zhaoBao from '../component/list-news.vue'
	import ls from '../../utils/local.js'
	import radioModal from './radio-modal.vue'
	import {
		querySysData
	} from '../../api/service.js'
	import {
		queryNewsLast
	} from '../../api/service.js'
	export default {
		data() {
			return {
				dclCount: 0,
				dshCount: 0,
				yshCount: 0,
				yclCount: 0,
				zbtype: '5',
				zhtype: '6',
				currentBar: 'zhaobaomodule',
				deptName: '国有资源管理处',
				realname: '--',
				purchase: {
					// 'name': '采购',
					// list: [
					// {
					// 	imageUrl: '../../static/Hicon/wdxm_icon.png',
					// 	navName: '合同查询',
					// 	directUrl: '../component/query/queryContract?type=query',
					// 	width: '46rpx',
					// 	height: '50rpx',
					// },
					// {
					// 	imageUrl: '../../static/Hicon/htys_icon.png',
					// 	navName: '合同验收',
					// 	directUrl: '../component/query/queryContract?type=accept',
					// 	width: '46rpx',
					// 	height: '50rpx',
					// },
					// ]
				},
				permanent: {
					'name': '资产业务',
					list: [{
							imageUrl: '../../static/Hicon/zcrg_icon.png',
							navName: '资产入固',
							directUrl: '',
							width: '52rpx',
							height: '44rpx',
						},
						{
							imageUrl: '../../static/Hicon/zcdb_icon.png',
							navName: '资产调拨',
							directUrl: '',
							width: '48rpx',
							height: '50rpx',
						},
						{
							imageUrl: '../../static/Hicon/zcxg_icon.png',
							navName: '资产修改',
							directUrl: '',
							width: '44rpx',
							height: '48rpx',
						},
						{
							imageUrl: '../../static/Hicon/zccz_icon.png',
							navName: '资产处置',
							directUrl: '',
							width: '54rpx',
							height: '50rpx',
						},
						{
							imageUrl: '../../static/Hicon/zcpd_icon.png',
							navName: '资产盘点',
							directUrl: '',
							width: '44rpx',
							height: '48rpx',
						},
						{
							imageUrl: '../../static/Hicon/wdzc_icon.png',
							navName: '我的资产',
							directUrl: '',
							width: '52rpx',
							height: '46rpx',
						},
					]
				}

			}
		},
		components: {
			contentNav,
			zhaoBao,
			radioModal
		},
		// props:['data'],
		created() {
			this.realname = ls.get('mUserInfo') ? ls.get('mUserInfo').realname : '';
			this.deptName = ls.get('departs') ? ls.get('departs').slice(0, 12) : '暂无';
			this.getSysData();
		},
		methods: {
			barChange: function(e) {
				this.currentBar = e.currentTarget.dataset.bar
			},
			openDepart() {
				var data = ls.get('Listdeparts') ? ls.get('Listdeparts') : [];
				// this.$refs.radioModal.showModal(data)
				if (data.length > 1) {
					this.$refs.radioModal.showModal(data, ls.get('mUserInfo'))
				}

			},
			getSysData() {
				querySysData().then(res => {
					if (res.success) {
						this.dshCount = res.result.contractNum;
						this.getYshData()
					} else {

					}
				})
			},
			getYshData() {
				queryNewsLast({
					isApproved: 1,
					entityType: 'HT',
					pageSize: 10,
					pageNo: 1
					// consultationCategory: this.type
				}).then(res => {
					if (res.success) {
						this.yshCount = res.result.contracts.total;
					}
				})
			},
			openlist(status, type) {
				var obj = {
					status: status,
					type: type
				}
				this.$emit('open', obj)
			}


		}
	}
</script>

<style lang="scss">
	.home-content {
		width: 100%;
		height: 100%;
		background: #ffffff;
		position: relative;
		overflow: scroll;

		.home-head {
			width: 100%;
			height: auto;
			position: relative;
			margin-bottom: 140rpx;
		}

		.home-head-bg {
		    padding: 16rpx 0;
		    position: relative;
		    margin-top: -5rpx; 
		
		    .head-infor-list {
		        display: flex;
		        justify-content: center;
		        align-items: center;
		        margin-top: -45px; 
		
		        .list-box {
		            flex: 1;
		            position: relative;
		            align-self: center;
		            text-align: center;
		
		            &:not(:last-child) {
		                &:before {
		                    content: '';
		                    width: 2rpx;
		                    height: 72rpx;
		                    position: absolute;
		                    top: 9px;
		                    right: 0px;
		                    bottom: 9px;
		                    background: rgba(255, 255, 255, 0.6);
		                }
		            }
		
		            .box-number {
		                height: 56rpx;
		                line-height: 56rpx;
		                text-align: center;
		                font-size: 40rpx;
		                font-family: PingFangSC-Medium, PingFang SC;
		                font-weight: 500;
		                color: rgba(255, 255, 255, 1);
		                line-height: 56rpx;
		            }
		
		            .box-name {
		                height: 34rpx;
		                font-size: 24rpx;
		                font-family: PingFangSC-Regular, PingFang SC;
		                font-weight: 400;
		                color: rgba(255, 255, 255, 0.8);
		                line-height: 34rpx;
		                text-align: center;
		            }
		        }
		    }
		}


		.head-top {
			display: flex;
			// flex-direction: row;
			height: 54rpx;

			.head-scname {
				flex: 1;
				align-self: flex-start;
				display: flex;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				line-height: 36rpx;

				.scname-icon {
					width: 26rpx;
					height: 26rpx;
					flex: 0;
					margin-right: 8rpx;

					image {
						width: 26rpx;
						height: 26rpx;
					}
				}

				.deptName {
					font-size: 30rpx;
					flex: 1;
				}
			}

			.head-scoption {
				flex: 1;
				align-self: flex-start;
				display: flex;
				justify-content: flex-end;

				.help_icon {
					flex: 0;
					align-items: baseline;
					margin-right: 20rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.scan_icon {
					flex: 0;
					align-items: baseline;

					image {
						width: 48rpx;
						height: 36rpx;
					}
				}
			}
		}

		.head-person {
			display: flex;
			height: 72rpx;
			margin-bottom: 26rpx;
			margin-top: 12rpx;

			.person_logo {
				flex: 0;
				width: 72rpx;
				height: 72rpx;
				border-radius: 50% 50%;

				image {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}
			}

			.person_name {
				height: 72rpx;
				flex: 1;
				text-align: left;
				align-items: baseline;
				line-height: 72rpx;
				margin-left: 12rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}

		}

		.purchase-content {
			position: absolute;
			width: 706rpx;
			height: 222rpx;
			background: #fff;
			box-shadow: 0px 4rpx 12rpx 0px rgba(204, 212, 225, 0.42);
			border-radius: 8rpx;
			left: 50%;
			bottom: -80rpx;
			transform: translate(-50%, 0);
			padding: 26rpx 0rpx;
			z-index: 5;


		}

		.permanent-content {
			padding: 0rpx 27rpx;
			position: relative;
			height: auto;
			display: flex;
			margin-bottom: 18rpx;
		}

		.announcement-content {
			width: 706rpx;
			height: auto;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2rpx 10rpx 0rpx rgba(139, 165, 205, 0.17);
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			justify-content: center;
			padding: 0rpx 0rpx;
			margin: auto; // 移动到正确位置
			top: -140rpx; // 向上移动60rpx

			.announcement-bar {
				display: flex;
				height: 66rpx;
				flex: row;
				justify-content: center;

				.an-bar {
					flex: 1;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					line-height: 40rpx;
					position: relative;
				}

				.an-bar-active {
					color: #407AE0;

					&:after {
						content: '';
						width: 0rpx;
						height: 2rpx;
						background: #407AE0;
						position: absolute;
						transform: translate(-50%, 0);
						left: 50%;
						bottom: 0px;
						animation: move 400ms ease-in forwards;
					}
				}
			}
		}


	}

	@keyframes move {
		0% {
			width: 0;
		}

		50% {
			width: 56rpx;

		}

		75% {
			width: 80rpx;
		}

		100% {
			width: 112rpx;
		}
	}
</style>